<template>
  
    <el-menu
      default-active="1"
      unique-opened=true
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
     <!-- 子菜单1 -->
      <el-submenu index= 1 v-for="item of menulist" :key="item.parentId" >
        <!-- 一级菜单标题 -->
        <template slot="title">
          <span >{{item.perName}}</span>
        </template>
          <!-- 一级菜单对应的二级菜单 -->
          <el-menu-item :index="subitem.parentId+''" v-for="subitem of item.children" :key="subitem.parentId" @click="handlerRoute(subitem.perHref)">
              {{subitem.perName}}
          </el-menu-item>    
       
      </el-submenu>
      
    </el-menu>

</template>
<script>
  export default {
      data() {
          return {
               menulist: [],
          }
      },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      handlerRoute(url){
          this.$router.push(url)
      },
      
    },
    created(){
        this.menulist=JSON.parse(sessionStorage.getItem("menuList"))
    }
  }
</script>